<template>
	<div class="security-page">
		<back title="安全中心"></back>
		<div class="security-content">
			<div class="security-tab">
				<span :class="{active:tabindex == 1}"  @click="tabindex = 1">登录密码</span>
				<span :class="{active:tabindex == 2}" @click="tabindex = 2">交易密码</span>
			</div>
			<template v-if="tabindex == 1">
				<div class="security-form">
					<div class="input-form">
						<cube-input type="password" v-model="loginOldpwd" placeholder="请输入旧登录密码" :eye="eye"></cube-input>
					</div>
					<div class="input-form">
						<cube-input type="password" v-model="loginNewpwd" placeholder="请输入新登录密码" :eye="eye"></cube-input>
					</div>
					<div class="info">提示：登录密码是8～16位字母或数字组成</div>
				</div>
				<div class="login-btn">
					<button type="button" class="submit" @click="loginpwdFn"><cube-loading v-show="loading"></cube-loading>确定</button>
				</div>
			</template>
			<template v-else>
				<div class="security-form">
					<div class="input-form" v-if="TransferPwd">
						<cube-input type="password" v-model="payOldpwd" placeholder="请输入旧交易密码" :eye="eye"></cube-input>
					</div>
					<div class="input-form">
						<cube-input type="password" v-model="payNewpwd" placeholder="请输入交易密码" :eye="eye"></cube-input>
					</div>
					<div class="info">提示：交易密码是6位数字</div>
				</div>
				<div class="login-btn">
					<button type="button" class="submit" @click="paypwdFn"><cube-loading v-show="loading"></cube-loading>确定</button>
				</div>
			</template>
		</div>
	</div>
</template>

<script>
	export default {
		data(){
			return{
				loginOldpwd:'',
				loginNewpwd:'',
				payOldpwd:'',
				payNewpwd:'',
				loading:false,
				eye:{
					open: false,
					reverse: false
				},
				tabindex:1,
				loginfag:true,
				TransferPwd:false,
			}
		},
		created(){
			this.existsTransferPwd();
		},
		methods:{
			existsTransferPwd(){
				this.$http.get(`/MyInfo/existsTransferPwd`).then(res => {
					if(res.code == 200){
						this.TransferPwd = true;
					}
				})
			},
			loginpwdFn(){
				if(!this.loginOldpwd || !this.loginNewpwd){
					this.createToast('密码不能为空','error')
					return;
				}
				if(!this.loginfag) return;
				this.loginfag = false;
				this.loading = true;
				this.$http.get(`/MyInfo/updatePwd`,{
					oldPwd:this.loginOldpwd,
					pwd:this.loginNewpwd,
				}).then( res => {
					console.log(res)
					if(res.code == 200){
						this.createToast(res.msg,'correct')
						this.loginOldpwd = ''
						this.loginNewpwd = ''
					}else{
						this.createToast(res.msg,'error')
					}
					this.loginfag = true;
					this.loading = false;
				})
			},
			paypwdFn(){
				if(this.TransferPwd){
					if(!this.payOldpwd || !this.payNewpwd){
						this.createToast('密码不能为空','error')
						return;
					}
				}else{
					if(!this.payNewpwd){
						this.createToast('密码不能为空','error')
						return;
					}
				}

				if(!this.loginfag) return;
				this.loginfag = false;
				this.loading = true;
				this.$http.get(`/MyInfo/updateTransferPwd`,{
					oldPwd:this.payOldpwd,
					pwd:this.payNewpwd,
				}).then( res => {
					console.log(res)
					if(res.code == 200){
						this.createToast(res.msg,'correct')
						this.payOldpwd = ''
						this.payNewpwd = ''
					}else{
						this.createToast(res.msg,'error')
					}
					this.loginfag = true;
					this.loading = false;
				})
			},
			createToast(text,type){
				const toast = this.$createToast({
					time: 1000,
					txt: text,
					type:type
				})
				toast.show()
			}
		}
	}
</script>

<style lang="stylus">
	.security-page{
		padding-top:50px;
		background:#f7f7f7;
		.security-content{
			height:100%;
			overflow-y:auto;
			.security-tab{
				display:flex;
				align-items:center;
				height:50px;
				background-image: linear-gradient(to bottom, #48b5e4, #3555db)
				margin-top:10px;
				span{
					font-size:18px;
					flex:1;
					text-align:center;
					height:100%;
					line-height:50px;
					color:#cfcfcf;
					&.active{
						color #fff
						background-image linear-gradient(to bottom, #46a6e2, #1359b6)
					}
				}
			}
			.security-form{
				padding:20px;
				.input-form{
					background:#fff;
					margin-bottom:20px;
					padding:5px;
					.cube-input::after{
						border:0;
					}
				}
				.info{
					font-size:12px;
				}
			}
			.submit{
				background-image: linear-gradient(to bottom, #0392b7, #3563db)
				color #ffffff
				width 90%
				margin 0 auto
				height 40px
				border 0
				outline none 
				border-radius 5px
				margin-top 20px
				display flex
				align-items center
				justify-content center
				font-size:16px;
			}
		}
	}
</style>
